<template>
  <div class="Tools">
    <a-space>
      <input id="filePath" ref="fileObj" title="" type='file' name="file" :webkitdirectory="isDirectory" class="file-input" @change="handleChange" hidden />
      <a-button type="primary" @click="handleSelect(false)">
        <upload-outlined></upload-outlined>
        选择文件
      </a-button>
      <a-button type="primary" @click="handleSelect(true)">
        <folder-open-outlined />
        选择文件夹
      </a-button>
    </a-space>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, nextTick, InputHTMLAttributes } from 'vue'
import { message } from 'ant-design-vue';
import { UploadOutlined, FolderOpenOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    UploadOutlined,
    FolderOpenOutlined
  },
  setup() {
    const fileList = ref([]);
    const fileObj = ref(null)
    const isDirectory = ref(false)
    const handleChange = () => {
      let filePath = fileObj.value.value;
      var file = (document.getElementById("filePath") as HTMLInputElement).files[0];
      console.log(file);
      console.log(file.name);
      console.log(fileObj.value)
    }
    const handleSelect = (type) => {
      isDirectory.value = type
      nextTick(() => {
        fileObj.value.click()
      })
      
    }

    return {
      fileList,
      fileObj,
      handleChange,
      handleSelect,
      isDirectory,

    }
  },
})
</script>

<style lang="scss" scoped>
</style>
